<template>
    <h2>仓库调拨申请修改</h2>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="form.updDto" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <table style="width: 100%; border: 1px solid #ccc">
            <tr>
                <td colspan="3" style="background-color: grey">
                    <h3 style="color: aliceblue">基本信息</h3>
                    <hr />
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="单据主题" prop="vendorId">
                        <el-input v-model="form.updDto.rtName" style="width: 300px" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="单据编号" prop="vendorId">
                        <el-input v-model="form.updDto.rtNumber" style="width: 300px" :disabled="true"
                            placeholder="保存后自动生成编号" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="审核人员" prop="vendorId">
                        <el-input v-model="form.updDto.rtAuditors" style="width: 300px"
                            @dblclick="dialogVisible2 = true; GetSectorList()" />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <el-form-item label="备注" prop="desc">
                        <el-input v-model="form.updDto.rtSmark" type="textarea" />
                    </el-form-item>
                </td>
            </tr>
        </table>
        <br />
        <div style="height: 50px;">
            <el-button round @click="addhang()">新增行</el-button>
        </div>

        <!-- 产品表格 -->
        <table border="1" style="border-collapse: collapse; width: 1000px; height: 40px;">
            <thead>
                <tr>
                    <th><input type="checkbox" style="width: 30px;" />
                    </th>
                    <th style="height: 40px;">序号</th>
                    <th>产品名称</th>
                    <th>产品编号</th>
                    <th>规格型号</th>
                    <th>单位</th>
                    <th>数量</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in check" :key="index">
                    <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" @click="huoqu" /></td>
                    <td style=" text-align: center;">{{ index + 1 }}</td>
                    <td>
                        <input v-model="item.pName" type="text" placeholder="双击选择产品"
                            style="height: 40px; width: 150px;text-align: center;" @dblclick="dialogVisible = true" />
                    </td>
                    <td>
                        <input v-model="item.pNumber" type="text" style="height: 40px; width: 150px;text-align: center;"
                            @dblclick="dialogVisible = true" :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.pSpec" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.pUnit" type="text" style="height: 40px; width: 150px;text-align: center;"
                            :disabled="true" />
                    </td>
                    <td>
                        <input v-model="item.apaNumberApplication" type="text"
                            style="height: 40px; width: 150px;text-align: center;" @change="sumRPNum" />
                    </td>
                    <td><input v-model="item.apaSmark" type="text"
                            style="height: 40px;width: 150px;text-align: center;" />
                    </td>
                </tr>
            </tbody>
        </table>
        &nbsp;
        <!-- 产品名称弹框 -->
        <el-dialog v-model="dialogVisible" title="产品名称选择" width="1000" style="height: 700px;"
            :before-close="handleClose">
            <span></span>
            <template #footer>
                <el-row>
                    <el-col :span="4">
                        <el-tree style="max-width: 600px" :data="VendorType" :props="defaultProps"
                            default-expand-all="true" />
                    </el-col>
                    <el-col :span="20">
                        <el-table :data="productlist" border style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55" />
                            <el-table-column prop="pName" label="产品名称" align="center" />
                            <el-table-column prop="pNumber" label="产品编号" align="center" />
                            <el-table-column prop="pUnit" label="规格型号" align="center" />
                        </el-table>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="dialogVisible = false">
                    保存
                </el-button>
            </template>
        </el-dialog>
        <!-- 我方代表弹框 -->
        <el-dialog v-model="dialogVisible2" title="我方代表" width="1000" style="height: 700px;"
            :before-close="handleClose">
            <span></span>
            <template #footer>
                <el-row>
                    <el-col :span="4">
                        <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps"
                            default-expand-all="true" @node-click="handleNodeClick2" />
                    </el-col>
                    <el-col :span="20">
                        <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChange2">
                            <el-table-column type="selection" width="55" />
                            <el-table-column type="index" label="序号" align="center" />
                            <el-table-column prop="mName" label="姓名" align="center" />
                            <el-table-column prop="sectorName" label="部门" align="center" />
                            <el-table-column prop="postName" label="岗位" align="center" />
                        </el-table>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="dialogVisible2 = false">
                    保存
                </el-button>
            </template>
        </el-dialog>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive, computed } from "vue";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const locationOptions = ["Home", "Company", "School"];
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import http from '../../../http.js'
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)   //我方代表
const route = useRoute();
const router = useRouter();
const form = reactive({
    "updDto": {
        "requestTransfersId": route.query.rId,
        "rtName": "",
        "rtNumber": "",
        "rtAuditors": "",
        "rtSmark": "",
        "addName": "",
        "addTime": "",
        "office_Id": "",
        "user_Id": "",
        "updName": "",
        "updTime": "",
        "upddto": [
            {
                "allocationProductAppId": "",
                "rtNumber": "",
                "productId": "",
                "pNumber": "",
                "pName": "",
                "pSpec": "",
                "pUnit": "",
                "apaNumberApplication": "",
                "apaSmark": "",
                "addName": "",
                "addTime": "",
                "office_Id": "",
                "user_Id": "",
                "updName": "",
                "updTime": ""
            }
        ]
    }
})
//生命周期函数钩
onMounted(() => {
    ProductList();  //显示产品列表
    getVendorType(); //显示供应商类型
    GetManpowerList(); //显示我方代表
    getFan();//反填
})
const ids = ref([])
//点击新增行
const check = ref([])
const addhang = () => {
    check.value.push({
        productId: '',
        pNumber: '',
        pName: '',
        pSpec: '',
        pUnit: '',
        apaNumberApplication: '',
        apaSmark: ''
    });
}

//#region  产品名称弹框
//显示供应商中的供应商类别树形
var VendorType = ref([]);
const getVendorType = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelect').then(res => {
        if (res.data.code == 0) {
            VendorType.value = res.data.data
        }
        console.log(VendorType.value)
    })
}

const productPage = reactive({
    pindex: 1,
    psize: 100,
    pageLast: 0,
    sumCount: 0,
    PName: "",
    PNumber: "",
})
//显示产品列表
const productlist = ref([])
const ProductList = () => {
    axios.get(http.zblnb + '/cg/api/ProcurementReturn/GetProductList', {
        params: {
            pindex: productPage.pindex,
            psize: productPage.psize,
            PName: productPage.PName || "",
            PNumber: productPage.PNumber || "",
            ProductTypeId: 0
        }
    })
        .then(res => {
            productlist.value = res.data.data.list
            productPage.sumCount = res.data.data.sumCount;
            productPage.pageLast = res.data.data.pageLast
            console.log(res.data)
        })
}

//选中的产品名称
const handleSelectionChange = (val: User[]) => {
    check.value = val
    console.log(val)
    console.log(check.value[0].pName)
}

//#endregion
//#region  我方代表

//查询条件
const wform = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const wPage = reactive({
    Pindex: 1,
    Psize: 10,
    pcount: 0,
    lcount: 0
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
            console.log(sectorlist.value)
        })
}

//树形
const handleNodeClick2 = (data: Tree) => {
    console.log(data)
    wform.SectorId = data.value
    GetManpowerList();
}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: wPage.Pindex,
            Psize: wPage.Psize,
            MName: wform.MName || "",
            Mstart: wform.Mstart || "",
            Mend: wform.Mend || "",
            Bstart: wform.Bstart || "",
            Bend: wform.Bend || "",
            SectorId: wform.SectorId || "",
            PostId: wform.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            wPage.lcount = res.data.data.lcount;
            wPage.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}


//多选框
const check2 = ref([])
const handleSelectionChange2 = (val: User[]) => {
    check2.value = val
    console.log(check2.value[0])
    form.addDto.rtAuditors = check2.value[0].mName
}


//#endregion

//点击复选框获取选中的值
const selectedRows = ref([])
const huoqu = () => {
    if (ids.value) {
        selectedRows.value = check.value.filter(item => item.productId);
    }
    console.log(selectedRows.value)
}


//取消
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    router.push('/ShowRequestTransfers')
}

//数量合计
//输入数量change事件
const sumRPNum = (sum: number) => {
    form.sumnum += Number(sum.srcElement.__vnode.dirs[0].value);
}


const getFan = () => {
    axios.get(http.zblnb+'/erpck/api/RequestTransfers/ProcureEnquirySetInfo?RequestTransfersId=' + route.query.rId).then((res) => {
        console.log(res.data.data)
        console.log(res.data.data.pcName)
        form.updDto.addName = res.data.data.addName
        form.updDto.addTime = res.data.data.addTime
        form.updDto.office_Id = res.data.data.office_Id
        form.updDto.requestTransfersId = route.query.rId
        form.updDto.rtAuditors = res.data.data.rtAuditors
        form.updDto.rtName = res.data.data.rtName
        form.updDto.rtNumber = res.data.data.rtNumber
        form.updDto.rtSmark = res.data.data.rtSmark
        form.updDto.updName = res.data.data.updName
        form.updDto.updTime = res.data.data.updTime
        check.value = res.data.data.upddto;
    })
}




//添加预生产计划
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
                form.updDto.rtName= form.updDto.rtName,
                form.updDto.rtNumber= form.updDto.rtNumber,
                form.updDto.rtAuditors= form.updDto.rtAuditors,
                form.updDto.rtSmark= form.updDto.rtSmark,
                form.updDto.addName= '王思雨',
                form.updDto.addTime= '2024-10-28',
                form.updDto.office_Id= '0',
                form.updDto.user_Id= '0',
                check.value.forEach((item) => {
                form.updDto.upddto.push({
                    productId: item.productId,
                    pNumber: item.pNumber,
                    pName: item.pName,
                    pSpec: item.pSpec,
                    pUnit: item.pUnit,
                    apaNumberApplication: item.apaNumberApplication,
                    apaSmark: item.apaSmark
                })
            })
            console.log(form.updDto)
            form.updDto.upddto = form.updDto.upddto.filter((item) => item.apaNumberApplication != '')
            axios.post(http.zblnb+'/erpck/api/RequestTransfers/ProcureEnquiryUpdate', {
                UpdDto: form.updDto
            })
                .then(res => {
                    console.log(res.data)
                    if (res.data.data > 0) {
                        ElMessage.success('修改成功');
                        router.push('/ShowRequestTransfers');
                    }
                    else {
                        ElMessage.error('修改失败');
                    }
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<style>
table {
    width: 100%;
    /* 可选：设置表格宽度 */
    border-collapse: collapse;
    /* 防止单元格之间的间隔 */
}

td {
    text-align: center;
    /* 水平居中 */
    vertical-align: middle;
    /* 垂直居中 */
    border: 1px solid #ddd;
    /* 添加边框用于可视化 */
    padding: 10px;
    /* 单元格内边距 */
}
</style>